<template>
  <!-- 样式配置 -->
  <div>
    <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
      <el-tab-pane label="样式设置" name="first">
        <Common></Common>
      </el-tab-pane>
      <!-- 数据配置 -->
      <el-tab-pane label="数据配置" name="second">
        <el-form label-width="70px" label-position="left">
          <el-form-item label="年龄:">
            <el-input
              v-model="modelItem.data.age"
              type="text"
              maxlength="2"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.age" />
          </el-form-item>
          <el-form-item label="地址:">
            <el-input
              v-model="modelItem.data.address"
              type="text"
              maxlength="30"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.address" />
          </el-form-item>
          <el-form-item label="工作经验:">
            <el-input
              v-model="modelItem.data.workService"
              type="text"
              maxlength="10"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.workService" />
          </el-form-item>
          <el-form-item label="联系方式:">
            <el-input
              v-model="modelItem.data.phoneNumber"
              type="text"
              maxlength="11"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.phoneNumber" />
          </el-form-item>
          <el-form-item label="邮箱地址:">
            <el-input
              v-model="modelItem.data.email"
              type="text"
              maxlength="30"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.email" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Common from '@/options/Common.vue'
import selectModelItem from '@/hooks/selectModel.ts' //当前选中模块
const modelItem = selectModelItem()
const activeName = ref('first')
const value2 = ref(true)
// const handleClick = (tab: TabsPaneContext, event: Event) => {
//   console.log(tab, event)
//   console.log(activeName.value)
// }
</script>
<style lang="scss" scoped>
:deep(.el-input) {
  width: 80%;
  height: 27px;
  line-height: 27px;
  margin-right: 2px;
}

:deep(.el-form-item__label) {
  font-size: 13px;
}

:deep(.el-tabs--border-card) {
  border: 0;
}
</style>
